import React, { useEffect, useState } from "react";
import { Button, Form, Input, Select } from "antd";
import FormDemo from "./FormDemo";
import api from "../../../api";
const { Option } = Select;
export const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
  colon: false,
};
export const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "${label} is not a valid email!",
    number: "${label} is not a valid number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};
export const positionStyle = {
  position: "absolute",
  bottom: 0,
  width: "100%",
  borderTop: "1px solid #e8e8e8",
  padding: "10px 16px",
  textAlign: "right",
  left: 0,
  background: "#fff",
  borderRadius: "0 0 4px 4px",
};
const SettingArticle = ({ openOssFileVisible, handlerInfo, handlerDataInfo, closeSettingVisible }) => {
  const [classifyList, setClassifyList] = useState([]);
  const [tagList, setTagList] = useState([]);
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    getClassifyList();
    getTagList();
  };
  const getClassifyList = async () => {
    const res = await api.getClassifyList();
    setClassifyList([...res.data]);
  };
  const getTagList = async () => {
    const res = await api.getTagList();
    setTagList([...res.data]);
  };
  const removeValue = (type) => {
    handlerDataInfo("", type);
  };
  return (
    <div className="setting-article">
      <div className="setting-content">
        <FormDemo layout={layout} validateMessages={validateMessages} scope={handlerInfo} handlerDataInfo={handlerDataInfo}>
          <Form.Item label="选择分类">
            <Select value={handlerInfo.classify} onChange={(e) => handlerDataInfo(e, "classify")}>
              {classifyList?.length &&
                classifyList.map((item, index) => {
                  return (
                    <Option value={item.text} key={index}>
                      {item.text}
                    </Option>
                  );
                })}
            </Select>
          </Form.Item>
          <Form.Item label="选择标签">
            <Select value={handlerInfo.tag} onChange={(e) => handlerDataInfo(e, "tag")}>
              {tagList?.length &&
                tagList.map((item, index) => {
                  return (
                    <Option value={item.text} key={index}>
                      {item.text}
                    </Option>
                  );
                })}
            </Select>
          </Form.Item>
          <Form.Item label="文章封面">
            <div className="cover-box" onClick={openOssFileVisible}>
              <img src={handlerInfo.cover} alt="" />
            </div>
          </Form.Item>
          <Form.Item label=" ">
            <Input value={handlerInfo.cover} onChange={(e) => handlerDataInfo(e.target.value, "cover")} />
          </Form.Item>
          <Form.Item label=" ">
            <Button className="remove-cover-btn" onClick={() => removeValue("cover")}>
              移除
            </Button>
          </Form.Item>
        </FormDemo>
      </div>
      <div style={positionStyle}>
        <Button type="primary" onClick={closeSettingVisible}>
          确认
        </Button>
      </div>
    </div>
  );
};
export default SettingArticle;
